<template>
    <section class="content">
        <div class="section-block">
            <div class="shadow-block">
                <span>Competition</span>
                <h1 style="font-size:40px">{{ $t('langObj.competitionPlatform') }}</h1>
                <p>{{ $t('langObj.platformDesc') }}</p>
            </div>
             <article>
                <div class="select-block">
                    <h2>{{ $t('langObj.bisai') }}</h2>
                    <Button icon="md-add" style="backgroundColor:rgba(0,104,233,1);color:#fff;width:140px;" @click="createCompetition">{{ $t('langObj.createMatch') }}</Button>
                    <Select style="width:120px;margin-left:10px;" :placeholder="$t('langObj.select')" v-model="defaultClassification" @on-change="filterCompetion">
                        <Option v-for="item in classificationList" :value="item.status" :key="item.status">{{ item.label }}</Option>
                    </Select>
                    <Input style="width:170px;margin-left:10px;" :placeholder="$t('langObj.search')" search @on-search="searchCompetition" v-model="comptitionName"/>
                </div>
                <div>
                    <!-- <Button type="primary" style="background-color:#C2142F;border:none">获奖作品</Button> -->
                </div>
            </article>
            <figure>
                <competition-item v-for="item in contentArr" :key="item.competition_id" :item="item" @click.native="toDetails(item.competition_id)"></competition-item>
            </figure>
        </div>
    </section>
</template>

<script>
import competitionItem from '../../components/competitions/competitionItem'
import { mapActions } from 'vuex';
export default {
    components:{ competitionItem },
    data(){
        return{
            defaultClassification:"",
            comptitionName:"",
            classificationList: [
                {
                    status: '',
                    label: this.$t('langObj.allMatches')
                },
                {
                    status: '6',
                    label: this.$t('langObj.notStarted')
                },
                {
                    status: '5',
                    label: this.$t('langObj.processing')
                },
                {
                    status: '4',
                    label: this.$t('langObj.over')
                }
            ],
            contentArr:[],
        }
    },
    methods: {
        ...mapActions(['XallCompetitions']),
        createCompetition(){
             this.$Message.info({
                content: this.$t('langObj.userUnsupported'),
                duration: 3,
            })
        },
        toDetails(id){
            this.$router.push({path:`/competitions/${id}`})
        },
        filterCompetion(){
            this.mountedCompetitions()
        },
        searchCompetition(){
            let arr = [];
            if(this.comptitionName.trim()){
                this.contentArr.filter(element => {
                    if(element.competition_name.indexOf(this.comptitionName.trim()) > -1){
                        arr.push(element)
                    }
                })
                this.contentArr = arr;
            }else{
                this.mountedCompetitions()
            }
        },
        mountedCompetitions(){
            this.XallCompetitions(this.defaultClassification).then(res => {
                this.contentArr = res.data
            })
        }
    },
    mounted() {
        this.mountedCompetitions()
    },
}
</script>

<style lang="scss" scoped>
    .content{
        flex:1;
        min-width: 1200px;
        padding: 20px;
        background-color:#f9fafa;
        background-image: url(../../assets/images/competition.png);
        background-repeat: no-repeat;
        background-position-x: 50%;
        background-size: 100% 1172px;

        .section-block{
            width: 1200px;
            margin: 0 auto;

            .shadow-block{
                height:256px;
                padding:50px;
                background:rgba(255,255,255,1);
                opacity:0.8;
                border-bottom: 1px solid #f7f7f7;
                span{
                    font-size:12px;
                    font-weight:400;
                    color:rgba(77,90,106,1);
                }
                p{
                    margin-top:20px;
                    font-size:18px;
                    font-weight:400;
                    color:rgba(51,51,51,1);
                }
            }

            & > article{
                height: 100px;
                padding:0 25px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: #fff;

                .select-block {
                    display: flex;
                    align-items: center;
                    
                    & > h2{
                        padding: 0 20px;
                        margin-right: 20px;
                        font-weight: 700;
                        border-left: 4px solid #C2142F;
                    }
                }
            }
        }
    }
</style>
